import React, { Suspense } from 'react';
import { Spin } from 'antd';
import { observer } from 'mobx-react-lite';
import { Provider } from 'mobx-react';
import { StoreProps } from './store';
import { DocumentStore } from './store/documentStore';
import { ProofreadStore } from './store/proofreadStore';

// 懒加载Document组件
const Document = React.lazy(() => import('./Document'));

const DocumentPage: React.FC = () => {

  const stores: StoreProps = {
    documentStore : new DocumentStore(),
    proofreadStore : new ProofreadStore()
  }
  
  return (
    <Provider {...stores}>
      <Suspense fallback={<Spin size="large" className="global-spin" />}>
        <Document />
      </Suspense>
    </Provider>
  );
};

export default observer(DocumentPage);
